<template>
  <div class="">
    <div class="q-gutter-y-md">
      <ScrollArea :bot-margin="botMargin" v-if="isNeedScroll">
        <slot></slot>
      </ScrollArea>
      <template v-else>
        <slot></slot>
      </template>
      <footer class="">
        <q-card-actions class="justify-evenly q-pa-md" v-if="!disable">
          <q-btn :disable="disable" v-if="props.btn2Callback" style="width: 200px;" :class="props.color2" :label="props.label2" class="q-ml-sm blue-btn" @click="clickBtn2"/>
          <q-btn :disable="disable" v-if="props.btn1Callback" style="width: 200px;" :class="props.color1" :label="props.label1" class="yellow-btn" type="submit" @click="clickBtn1"/>
        </q-card-actions>
      </footer>

    </div>
  </div>
</template>

<script setup lang="ts">
import ScrollArea from 'src/components/ScrollArea.vue';


const props = withDefaults(defineProps<{
    btn1Callback?:()=>void
    btn2Callback?:()=>void
    botMargin: number
    label1?: string
    label2?: string
    color1?: string
    color2?: string
    btnWidth?:string
    disable: boolean
    isNeedScroll: boolean
}>(),{
  botMargin:100,
  disable: false,
  isNeedScroll: true
})


async function clickBtn1() {
  if (props.btn1Callback)
    props?.btn1Callback()
}


function clickBtn2() {
  if (props.btn2Callback)
    props?.btn2Callback()
}





</script>
<style scoped>
.footer {
  position:fixed;
  left: 0;
  bottom: 100;
  width: 100%;
  text-align: center;
}

.yellow-btn, .blue-btn{
  border: none !important;
}
</style>
